body {
  background-image: linear-gradient(45deg, #6e6f74, #202022);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
}
.phone {
  transform: rotate(-30deg) skewX(30deg);
}
.phone-back {
  height: 734px;
  width: 430px;
  background-image: linear-gradient(to bottom, #3a3b3f 70%, #1d1d1f);
  border-radius: 74px 40px 84px 50px;
  box-shadow: -26px 8px 8px -10px rgba(0, 0, 0, 0.3),
    -6px 6px 6px 0 rgba(0, 0, 0, 0.6), -30px 14px 10px -10px rgba(0, 0, 0, 0.5),
    -20px 40px 8px 0 rgba(0, 0, 0, 0.1), -20px 30px 8px 0 rgba(0, 0, 0, 0.1),
    inset 20px 0 15px -6px rgba(0, 0, 0, 0.6),
    inset 2px 0 4px -2px rgba(0, 0, 0, 0.6),
    inset 2px 0 1px -2px rgba(255, 255, 255, 0.1),
    inset 0 -15px 10px -10px rgba(255, 255, 255, 0.15);
  &:before {
    content: "";
    display: block;
    height: 300px;
    width: 100px;
    position: absolute;
    background-color: #fff;
    left: 16px;
    bottom: 40px;
    border-radius: 20px;
    filter: blur(5px);
    opacity: 0.1;
    transform: rotate(4deg);
  }
  &:after {
    content: "";
    display: block;
    height: 300px;
    width: 100px;
    position: absolute;
    background-color: #fff;
    left: 26px;
    bottom: 40px;
    border-radius: 20px;
    filter: blur(4px);
    opacity: 0.25;
    transform: rotate(2deg);
  }
}
.phone-screen {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1px;
  left: 31px;
  height: 710px;
  width: 400px;
  background-color: #000;
  border-radius: 48px 40px 52px 45px;
  box-shadow: -2px 0 0px -1px rgba(255, 255, 255, 0.4),
    -1px 3px 3px -3px rgba(255, 255, 255, 0.7);
  .display {
    width: 96%;
    height: 98%;
    border-radius: 48px 40px 52px 45px;
    background-color: #fff;
    position: relative;
    .banner {
      width: 100%;
      height: 140px;
      overflow: hidden;
      border-radius: 48px 40px 0 0;
    }
    .topbar {
      width: 100%-10px;
      padding: 10px 20px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
    }
    .firstline {
      display: flex;
      .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-top: -20px;
        margin-left: 10px;
      }
      .rightbase {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 0 20px;
        .top {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          text-align: center;
        }
        .button {
          width: 80%;
          padding: 5px;
          text-align: center;
          margin-top: 10px;
          border-radius: 5px;
          border: 1px solid #fb7299;
          cursor: pointer;
          .iconfont {
            color: #fb7299;
          }
          .text {
            color: #fb7299;
          }
        }
      }
    }
    .namesex {
      margin-top: 20px;
      padding-left: 10px;
      display: flex;
      align-items: center;
      .name {
        font-size: 18px;
        color: #fb7299;
        margin-right: 10px;
        font-weight: bold;
      }
      .iconfont {
        color: #00a1d6;
      }
      .huiyuan {
        margin-left: 10px;
        padding: 0 10px;
        background: #fb7299;
        color: #fff;
        border-radius: 3px;
      }
    }
    .exp {
      margin: 10px 0 0 10px;
      .exptop {
        .lv {
          background-color: #95ddb2;
          color: #fff;
          font-weight: bold;
          border-radius: 2px 0 0 2px;
        }
        .lvnum {
          font-weight: bold;
          color: #fff;
          font-size: 14px;
          border-radius: 2px 2px 2px 0;
          background-color: #95ddb2;
        }
      }
      .expbar {
        margin-top: 10px;
        width: 100px;
        position: relative;
        height: 2px;
        background: #333;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 70px;
          height: 2px;
          background-color: #95ddb2;
        }
      }
    }
  }
  .detail {
    display: flex;
    padding: 0 10px;
    margin-top: 10px;
    justify-content: space-between;
    align-items: center;
    .detailbtn {
      color: #1389bf;
    }
  }
  .title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    .selected {
      color: #fb7299;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        top: 25px;
        bottom: 0;
        width: 25px;
        height: 2px;
        background-color: #fb7299;
      }
    }
  }
  .header {
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    .pic {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .right {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name {
        color: #fb7299;
        font-size: 16px;
        font-weight: bold;
      }
      .des {
        font-size: 12px;
        color: #666;
      }
    }
  }
  .category {
    margin: 10px 0 0 10px;
    color: #1389bf;
    font-size: 16px;
    font-weight: 500;
  }
  .fengmian {
    margin: 10px;
    width: 95%;
    height: 195px;
    border-radius: 10px;
    overflow: hidden;
  }
}
.phone-left-side {
  position: absolute;
  left: 0;
  top: 60px;
  width: 30px;
  height: 100%;
  .phone-antena {
    position: absolute;
    height: 20px;
    width: 50px;
    left: -5px;
    top: 10px;
    border-radius: 50%;
    transform: rotate(-40deg) skewX(20deg);
    background-color: transparent;
    box-shadow: 0px -2px 1px -2px #000;
    &:after {
      content: "";
      display: block;
      height: 20px;
      width: 50px;
      position: absolute;
      transform: rotate(-2deg);
      left: -5px;
      top: 3px;
      border-radius: 50%;
      background-color: transparent;
      box-shadow: 0px -2px 1px -2px #000;
    }
  }
  .phone-antena.bottom {
    top: auto;
    bottom: 128px;
  }
}
.phone-button {
  position: absolute;
  top: 100px;
  left: 4px;
  height: 47px;
  width: 12px;
  background-color: #010101;
  border-radius: 30px;
  transform: skewY(-40deg);
  box-shadow: -32px -16px 10px 0 rgba(0, 0, 0, 0.4),
    -4px 0 4px 0 rgba(0, 0, 0, 0.4);
  &:before {
    content: "";
    display: block;
    position: absolute;
    height: 45px;
    width: 10px;
    background-image: linear-gradient(to bottom, #6a6b6f 85%, #0b0b0b);
    border-radius: 20px;
  }
  &:after {
    content: "";
    display: block;
    position: absolute;
    left: -2px;
    top: -1px;
    height: 44px;
    width: 10px;
    background-color: #2d2d2f;
    border-radius: 20px;
    box-shadow: inset -1px -1px 0 -1px rgba(255, 255, 255, 0.6);
  }
}
.phone-button.bottom {
  top: 160px;
}
.phone-button.top {
  top: 48px;
  height: 29px;
  width: 1px;
  left: 2px;
  border-radius: 10px 10px 10px 3px;
  box-shadow: inset 2px 0 0 -1px rgba(255, 255, 255, 0.25);
  &:after {
    height: 27px;
    width: 8px;
    left: -1px;
    top: 0px;
  }
  &:before {
    height: 28px;
    width: 8px;
    left: 1px;
    top: 1px;
    box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.4);
  }
}
.phone-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  .bottom-speaker {
    position: absolute;
    display: flex;
    left: calc(50% - 120px);
    bottom: 6px;
    transform: skewX(-50deg);
    div {
      height: 6px;
      width: 6px;
      background-color: #212121;
      box-shadow: inset -4px -3px 2px -2px #000,
        1px -1px 0 -1px rgba(255, 255, 255, 0.5);
      margin: 0 3px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      &:after {
        content: "";
        display: block;
        height: 3px;
        width: 3px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        bottom: -1px;
        left: 3px;
        opacity: 0.4;
      }
    }
  }
  .bottom-speaker.right {
    left: calc(50% + 45px);
  }
  .phone-screw {
    position: absolute;
    bottom: 5px;
    left: calc(50% - 38px);
    height: 9px;
    width: 9px;
    background-image: linear-gradient(
      to right,
      #1a1a1c 30%,
      #a1a2a7 60%,
      #1a1a1c 80%
    );
    border-radius: 50%;
    transform: translateX(-50%) skewX(-50deg);
    div {
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background-color: #252527;
      box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.9), inset -2px 1px 1px -1px #000;
      position: relative;
      &:after {
        content: "";
        display: block;
        height: 4px;
        width: 4px;
        background-color: #151515;
        transform: rotate(45deg);
        position: absolute;
        top: 1px;
        box-shadow: inset -1px -1px 0 0px rgba(255, 255, 255, 0.6);
      }
    }
  }
  .phone-screw.right {
    left: calc(50% + 36px);
  }
  .phone-charger {
    position: absolute;
    left: 50%;
    bottom: 2px;
    background-image: linear-gradient(
      to right,
      #121214 5%,
      #434446 20%,
      #434446 60%,
      #7a7b80 75%,
      #1b1b1d 90%
    );
    transform: translateX(-50%) skewX(-50deg);
    height: 14px;
    width: 48px;
    overflow: hidden;
    border-radius: 15px 16px 24px 20px;
    box-shadow: 1px 1px 1px -1px rgba(255, 255, 255, 0.4),
      inset -2px -2px 0 -1px #0e0e0e, inset -3px -3px 0 -1px #252527,
      inset 3px 3px 0 -1px #050505;
    &:after {
      content: "";
      display: block;
      height: 10px;
      width: 42px;
      background-color: #050505;
      border-radius: 20px 8px 16px 10px;
      box-shadow: 1px 1px 0 -1px rgba(255, 255, 255, 0.4);
    }
  }
  .phone-antena {
    position: absolute;
    height: 20px;
    width: 50px;
    bottom: 8px;
    left: 60px;
    border-radius: 40%;
    opacity: 0.7;
    transform: rotate(-45deg) skewX(20deg) scaleY(-1);
    background-color: transparent;
    box-shadow: 0px -2px 1px -2px #000;
    &:after {
      content: "";
      display: block;
      height: 20px;
      width: 50px;
      position: absolute;
      transform: rotate(-2deg);
      left: -3px;
      top: 3px;
      border-radius: 40%;
      background-color: transparent;
      box-shadow: 0px -2px 1px -2px #000;
    }
  }
  .phone-antena.right {
    left: auto;
    right: 70px;
    box-shadow: 0px -2px 1px -2px #000,
      19px -2px 0 -2px rgba(255, 255, 255, 0.4);
    &:after {
      box-shadow: 0px -2px 1px -2px #000,
        19px -2px 0 -2px rgba(255, 255, 255, 0.4);
    }
  }
}
